<template>
  <div>
    <el-card style="margin: 20px 0">
      <CategorySelect @getCategoryInfo="getCategoryInfo" :show="scene != 0"></CategorySelect>
    </el-card>
    <el-card>
      <!-- Spu列表 -->
      <div v-show="scene==0">
        <el-button type="primary" icon="el-icon-plus" :disabled="!category3id" @click="toAddSpuForm">添加SPU</el-button>
        <el-table style="width: 100%; margin: 20px 0;" border :data="records">
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="width"></el-table-column>
          <el-table-column prop="description" label="SPU描述" width="width"></el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="scope">
              <HintButton type="success" icon="el-icon-plus" size="mini" title="添加Sku" @click="toAddSkuForm(scope.row, category1id, category2id)"></HintButton>
              <HintButton type="warning" icon="el-icon-edit" size="mini"title="修改Spu" @click="toUpdateSpuForm(scope.row)"></HintButton>
              <HintButton type="info" icon="el-icon-info" size="mini"title="查看当前spu全部sku列表" @click="openSkuList(scope.row)"></HintButton>
              <el-popconfirm title="确定删除SPU吗？" @onConfirm="deleteSpu(scope.row)">
                <HintButton type="danger" icon="el-icon-delete" size="mini" title="删除spu" slot="reference"></HintButton>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: center"
          @size-change="handleSizeChange"
          @current-change="getSpuInfo"
          :current-page="page"
          :page-size="limit"
          :page-sizes="[3, 5, 10, 20]"
          layout="sizes, prev, pager, next, jumper, total"
          :total="total">
        </el-pagination>
      </div>
      <!-- 添加或修改Spu表单 -->
      <SpuForm v-show="scene==1" @spuFormtoSpuInfo="spuFormtoSpuInfo" ref="SpuForm"></SpuForm>
      <!-- 添加Sku -->
      <SkuForm v-show="scene==2" @skuFormtoSpuInfo="skuFormtoSpuInfo" ref="SkuForm"></SkuForm>
      <el-dialog :title="`${spuName}的sku列表`" :visible.sync="dialogVisible" :before-close="handleClose">
        <el-table :data="skuList" style="width: 100%" border  v-loading="loading">
          <el-table-column prop="skuName" label="名称" width="width" header-align="center"></el-table-column>
          <el-table-column prop="price" label="价格(元)" width="100"></el-table-column>
          <el-table-column prop="weight" label="重量(KG)" width="100"></el-table-column>
          <el-table-column prop="prop" label="默认图片" width="120">
            <template slot-scope="scope">
              <img :src="scope.row.skuDefaultImg" style="width:100px; height:100px;">
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import SpuForm from './SpuForm'
import SkuForm from './SkuForm'
export default {
    name: 'Spu',
    components: {
      SpuForm,
      SkuForm,
    },
    data(){
      return{
        category1id: "",
        category2id: "",
        category3id: "",
        page: 1,
        limit: 3,
        total: 0,
        records: [], //SpuInfo当前页的条数
        scene: 0, //0代表展示SPU列表数据   1 添加SPU|修改SPU   2 添加SKU
        dialogVisible: false,
        spuName: '',
        skuList: [], //存储的是SKU列表的数据
        loading: true,
      }
    },
    methods: {
      // 三级联动子组件传递自定义事件
      getCategoryInfo({ category1id, category2id, category3id }){
        this.category1id = category1id;
        this.category2id = category2id;
        this.category3id = category3id;
        this.getSpuInfo();
      },
      // 获取SPU信息
      async getSpuInfo(pages=1){
        this.page = pages
        const { page, limit, category3id } = this
        let result = await this.$API.spu.reqgetSpuInfo(page, limit, category3id)
        console.log("SpuInfo", result)
        if(result.code == 200){
          this.total = result.data.total
          this.records = result.data.records
        }
      },
      // 改变每页显示数据数量
      handleSizeChange(limit){
        this.limit = limit
        this.getSpuInfo()
      },
      // 跳转添加Spu表单
      toAddSpuForm(){
        this.scene = 1
        // 发请求到子组件spu，获取品牌和销售属性'
        this.$refs.SpuForm.addSpuData(this.category3id)

      },
      // 跳转修改Spu表单
      toUpdateSpuForm(row){
        this.scene = 1
        this.$refs.SpuForm.getSpuFormInfo(row)
      },
      // 子组件SpuForm自定义事件
      spuFormtoSpuInfo({scene, flag}){
        this.scene = scene
        if(flag == 'updateSpu'){
          // 修改状态停留当前页
          this.getSpuInfo(this.page)
        }else{
          // 添加状态默认回第一页
          this.getSpuInfo()
        }
      },
      // 删除SPU
      async deleteSpu(row){
        let result = await this.$API.spu.reqDeleteSpu(row.id)
        if(result.code == 200){
          this.$message({
            type:"success",
            message: "删除成功"
          })
          // 当前页条数大于1，显示当前页，等于1返回上一页
          this.getSpuInfo(this.records.length > 1 ? this.page : (this.page -1))
        }
      },
      // 跳转添加Sku表单
      toAddSkuForm(row, category1Id, category2Id){
        this.scene = 2
        this.$refs.SkuForm.getSkuData(row, category1Id, category2Id)
      },
      // 子组件skuForm自定义事件
      skuFormtoSpuInfo(scene){
        this.scene = scene
      },
      // 点显示sku列表弹窗
      openSkuList(row){
        this.dialogVisible = true
        this.spuName = row.spuName
        return new Promise((resolve, reject) => {
          this.$API.spu.reqfindBySpuId(row.id).then((res) => {
            if(res.code == 200){
              this.skuList = res.data
              this.loading = false
              console.log(this.skuList)
            }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      // 关闭弹窗
      handleClose(done) {
        // 把数据sku列表数据清空，loading调为true状态。不然只能loading一次
        this.skuList = []
        this.loading = true
        done()
      },
    },
}
</script>

<style scoped>

</style>